<template>
  <div>
    <GGDialog
      :visible.sync="visible"
      title="添加虚拟评论"
      width="500px"
      :close-on-click-modal="true"
    >
      <el-form label-width="80px">
        <el-form-item label="商品">
          <div class="el-upload el-upload--picture-card" v-if="spuImg">
            <i class="el-icon-close" @click="removeSpuImg"></i>
            <el-image :src="spuImg" class="spu-img" />
          </div>

          <el-tooltip content="选择商品" v-else>
            <div
              class="el-upload el-upload--picture-card"
              @click="showSkuSelectForm"
            >
              <i class="el-icon-plus"></i>
            </div>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="用户头像"><UploadImg :limit="1" /></el-form-item>
        <el-form-item label="用户名称">
          <el-input placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="评论内容">
          <el-input placeholder="请输入评论内容" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="描述星级">
          <el-rate></el-rate>
        </el-form-item>
        <el-form-item label="服务星级">
          <el-rate></el-rate>
        </el-form-item>
        <el-form-item label="评论图片">
          <UploadImg v-model="imgs" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="primary" size="small">确定</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </template>
    </GGDialog>

    <SkuSelectForm ref="skuSelectFormRef" @success="getSpuImg" />
  </div>
</template>

<script>
import SkuSelectForm from "./skuSelectForm.vue";

export default {
  name: "VirtualCommentForm",
  components: {
    SkuSelectForm,
  },
  data() {
    return {
      visible: false,
      imgs: [],
      spuImg: "",
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    showSkuSelectForm() {
      this.$refs.skuSelectFormRef.open();
    },
    // 获取图片
    getSpuImg(spuImg) {
      this.spuImg = spuImg;
    },
    // 删除图片
    removeSpuImg() {
      this.spuImg = "";
    },
  },
};
</script>

<style scoped lang="scss">
.el-upload {
  width: 60px;
  height: 60px;
  line-height: 60px;
  position: relative;
}

.el-icon-close {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 12px;
  height: 12px;
  background-color: #606266;
  color: #fff;
  z-index: 100;
  font-size: 7px;
  border-radius: 50%;
  text-align: center;
  line-height: 13px;
}

.spu-img {
  width: 58px;
  height: 58px;
}
.el-icon-plus {
  font-size: 16px;
}
</style>
